<script setup lang='ts'>
import { onMounted,ref,watch } from "vue";
import { useRouter } from "vue-router";
import { getTitleM } from "../api/api";
const router = useRouter()
const data = ref()
const isData = ref()
onMounted(async()=>{
  const res = await getTitleM()
  console.log(res.data.data);
  
  data.value = res.data.data
  
})
const toSelect = (e:{}) => {
  router.push({name:'ThisSelect',query:e})
}
watch(()=>data.value,(value)=>{
  if(value.length === 0) return isData.value = true
})
</script>

<template>
  <van-empty description="暂无素材数据" v-if="isData"/>
    <van-grid style="position: relative;z-index: 0;" clickable :gutter="10" :column-num="3">
      <van-grid-item  @click="toSelect({type:value.title})"  v-for="value in data" :key="value" icon="photo-o" text="文字">
        <van-image width="100%" height="150px" fit="cover" :src="value.domainUrl" />
        <p>{{value.title}}</p>
      </van-grid-item>
    </van-grid>
</template>

<style scoped>

</style>